<template>
  <div>
    <router-link
      tag="div"
      to="/"
      v-show="showabs"
      class="header-abs">
      <div class="iconfont header-abs-icon">
        &#xeb99;
      </div>
    </router-link>

    <div class="header-fixed"
         v-show="!showabs"
         :style="opacitystyle"
    >
      <router-link to="/">
        <div class="iconfont header-fixed-icon">
          &#xeb99;
        </div>
      </router-link>
      景点详情
    </div>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        showabs: true,
        opacitystyle: {
          opacity: 0
        }
      }
    },
    methods: {
      handleScroll() {
        const top = document.documentElement.scrollTop;
        if (top > 60 ) {
          let opacity = top / 160;
          opacity = opacity > 1 ? 1:opacity;
          this.opacitystyle = {
            opacity:opacity
          }
          this.showabs = false;
        } else {
          this.showabs = true;
        }
      }
    },
    activated() {
      window.addEventListener('scroll', this.handleScroll)
    },
    deactivated() {
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>

<style lang="stylus" scoped>
  .header-abs {
    position absolute
    left .15rem
    top .15rem
    width .72rem
    height .72rem
    border-radius .36rem
    background rgba(0, 0, 0, .5)

    .header-abs-icon {
      font-size .36rem
      color #ffffff
      position absolute
      left .15rem
      top .15rem
    }
  }

  .header-fixed {
    z-index 2
    position fixed
    left 0
    right 0
    top 0
    height .88rem
    line-height .88rem
    overflow hidden
    background-color #00bcd4
    text-align center
    color #ffffff
    font-size .32rem

    .header-fixed-icon {
      position absolute
      left 0
      top 0
      width .8rem
      height .88rem
      line-height .88rem
      color #ffffff
    }
  }
</style>
